<template>
	<view>
		<view class="head-image">
			<image style="width: 100%;"
				src="https://img0.baidu.com/it/u=2741317132,3474557789&fm=253&fmt=auto&app=120&f=JPEG?w=660&h=434">
			</image>
		</view>
		<view class="g-h"></view>
		<view class="g-card g-item-card margin-auto reserve-info">
			<view class="g-padding card-content"
				style="display: flex;flex-direction: row; justify-content: space-between; align-items:center">
				<view class="r-font r-font-label">
					预约场地:
				</view>
				<view>
					<picker :value="form.roomIndex" :range="roomData" @change="roomChange">
						<view class="select">
							<view class="uni-input r-font">{{roomData[form.roomIndex]}}
							</view>
							<view style="width: 24rpx;"></view>
							<view><uni-icons type="right" size="24" color="#999"></uni-icons></view>
						</view>
					</picker>
				</view>

			</view>
			<view class="line"></view>
			<view class="g-padding card-content"
				style="display: flex;flex-direction: row; justify-content: space-between; align-items:center">
				<view class="r-font r-font-label">
					预约日期:
				</view>

				<picker mode="date" :value="form.date" :start="form.date" :end="form.endDate" @change="dateChange">
					<view class="select">
						<view>
							<view class="uni-input r-font">{{form.date}}</view>
						</view>
						<view style="width: 24rpx;"></view>
						<view>
							<uni-icons type="calendar" size="24" color="#999"></uni-icons>
						</view>
					</view>
				</picker>

			</view>
			<view class="line"></view>
			<view class="g-padding card-content"
				style="display: flex;flex-direction: row; justify-content: space-between; align-items:center">
				<view class="r-font r-font-label">
					预约时间:
				</view>
				<view style="display: flex;width: 40%;justify-content: space-between;" @click="timeRange">
					<view class="r-font">-</view>
					<view class="r-font">至</view>
					<view class="r-font">-</view>
				</view>
			</view>
		</view>
		<!--预订  -->
		<view class="g-h"></view>
		<view class="help">
			<view><view class="help-item" style="margin-bottom: 0px;"></view>&nbsp;正常</view>
			<view><view class="help-item help-item-disabled" style="margin-bottom: 0px;"></view>&nbsp;已定</view>
		</view>
		<view class="g-h"></view>
		<view
			v-bind:style="{width: '93%',height:'auto',backgroundColor: '#fff',display:scrollBox.none, margin:'0 auto'}">
			<view class="g-padding">
				<scroll-view scroll-y="true" class="seat-scroll" v-bind:style="{height:scrollBox.height}">
					<view v-for="(item,index) in seatArr">
						<view class="seat" v-if="item.status ==1">A{{item.key}}</view>
						<view v-else class="seat seat-disabled">A{{item.key}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 预订结束 -->
		<button class="r-button" hover-class="is-hover">预订</button>
		<uni-popup ref="timeRange">
			<view class="time-box">
				<view class="g-h"></view>
				<view class="time-head g-padding">
					<view class="time-cacel">取消</view>
					<view class="time-confirm">确认</view>
				</view>
				<view class="g-h"></view>
				<view class="time-items-box g-padding">
					<scroll-view scroll-y="true" class="item-scroll">
						<view class="time-itme" v-for="(item,index) in timeData"
							v-bind:style="{marginLeft:calculateLeft(index)}">{{item.time}}</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDate
	} from '../../common/globalFun'

	import myLoading from "../../myComponents/myLoading.vue"

	export default {
		data() {
			return {
				scrollBox: {
					height: "0px",
					display: "none"
				},
				roomData: [
					"自习室名称1", "自习室名称2", "自习室名称3", "自习室名称4"
				],
				timeData: [{
						time: "8:00-9:00",
						status: 1
					},
					{
						time: "9:00-10:00",
						status: 1
					},
					{
						time: "10:00-11:00",
						status: 1
					},
					{
						time: "12:00-13:00",
						status: 1
					},
				],
				seatArr: this.gen(),
				form: {
					date: getDate(),
					endDate: getDate("end"),
					"roomIndex": 0
				},
				domTree: {
					head: {
						height: null,
					},
					reserve: {
						height: null,
					},
					globalHeight: {
						height: null,
					},
					system: {
						height: null,
						width: null,
					},
					rButton: {
						height: null,
					}
				}

			}
		},
		components: {
			myLoading
		},
		onReady() {
			let _that = this
			uni.createSelectorQuery().select(".head-image").boundingClientRect(res => {
				console.log(res.height)
				_that.domTree.head.height = res.height
				_that.checkHAndSetH()

			}).exec();
			
			uni.createSelectorQuery().select(".seat-scroll").boundingClientRect(res=>{
				console.log("-----",res.width)
			}).exec()

			uni.createSelectorQuery().select(".reserve-info").boundingClientRect(res => {
				console.log(res.height)
				_that.domTree.reserve.height = res.height
				_that.checkHAndSetH()
			}).exec();

			uni.createSelectorQuery().select(".g-h").boundingClientRect(res => {
				console.log(res.height)
				_that.domTree.globalHeight.height = res.height
				_that.checkHAndSetH()
			}).exec();



			//r-button
			uni.createSelectorQuery().select(".r-button").boundingClientRect(res => {
				console.log(res.height)
				_that.domTree.rButton.height = res.height
				_that.checkHAndSetH()
			}).exec();

			uni.getSystemInfo({
				success: function(res) {
					console.log(res.windowHeight)
					_that.domTree.system.height = res.windowHeight
					_that.domTree.system.width = res.windowWidth
					let cardWidth = _that.domTree.system.width / 0.93 - uni.upx2px(40);
					console.log("---", cardWidth / (uni.upx2px(70) + 2))
					_that.checkHAndSetH()
				}
			});
			// console.log(uni.upx2px("360")) 
		},
		mounted() {
			console.log(getDate("end"))
		},
		methods: {
			open: function() {
				
				this.$refs.popup.open("bottom")
			},
			gen() {
				let seatArr = [];
				seatArr.push({key: "01",status: "1"})
				seatArr.push({key: "02",status: "1"})
				seatArr.push({key: "03",status: "0"})
				seatArr.push({key: "04",status: "1"})
				seatArr.push({key: "05",status: "1"})
				seatArr.push({key: "06",status: "1"})
				seatArr.push({key: "07",status: "1"})
				seatArr.push({key: "08",status: "0"})
				seatArr.push({key: "09",status: "1"})
				seatArr.push({key: "10",status: "0"})
				seatArr.push({key: "11",status: "1"})
				return seatArr;
			},
			roomChange(event) {
				this.form.roomIndex = event.detail.value
			},
			dateChange(event) {
				this.form.date = event.detail.value
			},
			timeRange() {
				this.$refs.timeRange.open("bottom")
			},
			calculateLeft(index) {
				return index % 3 == 0 ? "0rpx" : "16rpx"
			},
			checkHAndSetH() {
				if (this.domTree.system.height !== null && this.domTree.globalHeight.height !== null && this.domTree
					.reserve.height !== null && this.domTree.rButton.height !== null) {
					console.log("123321")
					this.scrollBox.height = this.domTree.system.height - this.domTree.globalHeight.height * 2 - this
						.domTree.reserve.height - this.domTree.head.height - uni.upx2px(40 + 120) - this.domTree.rButton
						.height + "px"
				}
			}
		}
	}
</script>

<style lang="scss">
	.seat-disabled{
		background-color: #ccc;
		border: #ccc 1px solid;
	}
	.time-head {
		display: flex;
		justify-content: space-between;
	}

	.time-cacel {
		color: #ccc;
	}

	.time-confirm {
		color: $uni-color-primary;
	}

	.r-font-label {
		font-weight: bold;
	}

	.item-scroll {
		height: 400rpx;
		width: 100%;

		// display: flex;
		// flex-direction: row;
		// flex-wrap: wrap;
		// justify-content: space-between;
		// align-items: baseline;
	}

	.time-box {
		background-color: #fff;
		width: 100%;
		overflow: hidden;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.time-itme {
		width: 222rpx;
		height: 73rpx;
		border: 1rpx #ccc solid;
		height: 73rpx;
		line-height: 71rpx;
		width: 222rpx;
		overflow: hidden;
		text-align: center;
		font-size: 31rpx;
		color: #333;
		margin-bottom: 16rpx;
		float: left;
	}

	.r-button {
		width: 94%;
		position: fixed;
		bottom: 40rpx;
		left: 3%;
		background-color: $uni-color-primary;
		border-color: $uni-color-primary;
		color: #fff;
	}

	.is-hover {
		background-color: $uni-color-primary-hover;
		border-color: $uni-color-primary-hover;
	}

	.r-font {
		font-size: 34rpx;
		color: $uni-text-color;
	}

	.head-image {
		width: 100%;
		height: 360rpx;
		overflow: hidden;
	}

	.select {
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.seat {
		width: 70rpx;
		height: 70rpx;
		border: 1rpx solid green;
		text-align: center;
		font-size: $uni-font-size-base;
		line-height: 70rpx;
		color: $uni-text-color;
		float: left;
		margin-left: 0rpx;
		margin-bottom: 20rpx;
	}

	.seat-scroll {
		width: 100%;
	}
	.help{
		width: 50%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	.help-item{
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid green;
		float: left;
		margin-right: 5rpx;
	}
	
	.help-item-disabled{
		background-color: #ccc;
		border: #ccc solid 1px;
	}
</style>